{% extends "base.html" %}
{% load cctags %}
{% load ccfilters %}
{% block css %}
    <style type="text/css">
        div.content img.my_photo{
            max-width: 80px;
            max-height: 80px;
            margin-right: 10px;
            border: solid 1px #cccccc;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            float: left;
        }
        div.topdiv span img {
            float: none;
            width: 16px;
            height: 16px;
            vertical-align: text-top;
        }
        div.infobox {
            font-size: 14px;
        }
        div.content p {
            float: left;
            width: 170px;
            margin-top: 2px;
        }
    </style>
{% endblock %}
{% block scripts %}
{% if option.enable_gmap %}
        <script type="text/javascript" src="/static/js/markerclusterer_packed_v3.js"></script>
        <script type="text/javascript" src="/static/js/json2.js"></script>
        <script type="text/javascript" src="/static/js/jquery.blockUI.js"></script>
        <script type="text/javascript" src="{% url views.localjavascript 'jquery.magicmap2.js' %}"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".led").led(8);


			    var option = { mapTypeId: google.maps.MapTypeId.RODEMAP}

                var startcenter;
                {% if user.location %}
                    startcenter = new google.maps.LatLng({{ user.location.lat }}, {{ user.location.lon }});
                    option["zoom"] = 9;
                {% else %}
	            startcenter = $.magicmap.get_location_by_ip();
                    if(startcenter){
                        option["zoom"] = 9;
                    }else{
                        startcenter = $.magicmap.get_location_by_lang();
                        option["zoom"] = 4;
                    }
                {% endif %}
            
                var mmap = new $.magicmap(option);
				
				uicontrols = { map_container: $("#routes_map_container"),
							   searchbox: $("#routes_search_query"),
							   searchbtn: $("#routes_search_btn"),
							   waiting: $("#routes_search_waiting"),
							   searchresults: $("#routes_search_results"),
							   searchmsg: $("#routes_search_msg")
				}

                mmap.initmap({startcenter: startcenter,
                              routesOption: {enable: true},
                              ridersOption: {enable:true}
                              },
							  uicontrols);
            });
        </script>
{% endif %}
{% endblock %}

{% block menu %}
{% include '_menu_home.html' %}
{% endblock %}

{% block main-page %}
<div id="index_left">
{% if option.enable_gmap %}
    {% include '_base_routes_map.html' %}
{% endif %}
</div>
<div id="index_right">
    <div id="slogan">
        <p>{% _ "MagiCycles is a community to create and share your rides." %}</p>
        <img src="/static/images/slogan.png"/>
    </div>
    <div id="stats">
        <p class="title">{% _ "Our Community" %}</p>
        <div class="stats"> </div>
        <div class="stats">
            <div class="led">{{ stats.riders_count}}</div>
            <div class="statstext">{% _ "Riders" %}</div>
        </div>
        <!--div class="stats">
            <div class="led">{{ stats.teams_count}}</div>
            <div class="statstext">{% _ "Teams" %}</div>
        </div-->
        <div class="stats">
            <div class="led">{{ stats.routes_count }}</div>
            <div class="statstext">  {% _ "Routes" %}</div>
        </div>
        <div class="stats">
            <div class="led">{{ stats.routes_total_distance|divide:"1000"|_u|floatformat:"0" }}</div>
            <div class="statstext"> {{ unit.km_mile }} </div>
        </div>
        <div class="stats">
            <div class="led">{{ stats.rides_count }}</div>
            <div class="statstext"> {% _ "Rides" %} </div>
        </div>
        <div class="stats">
            <div class="led">{{ stats.rides_total_distance|divide:"1000"|_u|floatformat:"0" }}</div>
            <div class="statstext"> {{ unit.km_mile }} </div>
        </div>
        <div class="stats">
        </div>
    </div>
    <div>
        {% if user %}
            <a href="{% url routes.routesviews.createroute %}" class="yellowbutton bigsize">{% _ "Add Route" %}</a>
        {% else %}
            <a href="{% url riders.ridersviews.joinus %}" class="yellowbutton bigsize">{% _ "Join Us" %}</a>
        {% endif %}
    </div>
    <div id="donate">
        <p><a href="{% url views.donate %}" target="_blank">{% _ "Donate" %}</a>
            {% _ " to support MagiCycles running and developing."%}</p>
    </div>
</div>
{% endblock %}
